<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

   {% if title %}
    <title>Welcome to {{ title }}</title>
    {% else %}
    <title>Welcome to Twitter</title>
    {% endif %}
</head>
<body style="background-color: #f3f8ff;">
     <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
     <h5 class="my-0 mr-md-auto font-weight-normal">Twitter</h5>
     <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="{{ url_for('index') }}">HOME</a>
     </nav>
     {% if current_user.is_anonymous %}
     <a class="btn btn-outline-primary" href="{{ url_for('login') }}">Login</a>
     {% else %}
     <a class="btn btn-outline-primary" href="{{ url_for('logout') }}">Logout</a>
     {% endif %}
     </div>

    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul>
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}

    {% block content %} {% endblock %}
</body>
</html>